<template>
  <div>
    <el-form :model="form" label-width="110px" ref="form" :rules='rules'>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发票号码:" prop="invoiceNum">
            <el-input v-model="form.invoiceNum" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票抬头:" prop="invoiceTitle">
            <el-input v-model="form.invoiceTitle" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开票对象:" prop="makeInvoiceObj">
            <el-input v-model="form.makeInvoiceObj" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话号码:" prop="telPhone">
            <el-input v-model="form.telPhone" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票日期:" prop="invoiceDate">
            <el-date-picker
              class='w-100'
              v-model="form.invoiceDate"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票类别:" prop="invoiceCategory">
            <el-select v-model="form.invoiceCategory" placeholder="请选择" class='w-100'>
              <el-option
                v-for="item in invoiceCategoryOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票类型:" prop="invoiceType">
            <el-select v-model="form.invoiceType" placeholder="请选择" class='w-100'>
              <el-option
                v-for="item in invoiceTypeOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票金额:" prop="invoiceAmount">
            <el-input v-model="form.invoiceAmount" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="增值税率:" prop="taxRate">
            <el-input v-model="form.taxRate" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纸质发票:" prop="paperFlag">
            <el-select v-model="form.paperFlag" placeholder="请选择" class='w-100'>
              <el-option
                v-for="item in paperFlagOptions"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>        
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="发票备注:" prop="remarks">
            <el-input
              type="textarea"
              v-model="form.remarks"
              :autosize="{ minRows: 3, maxRows: 4}"
              placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <data-table
            :value="tableData"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes"
            :width="160"
          >
          </data-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="handleOk">确 认</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import { addSalesInvoice } from '@/api/financial/index'
export default {
  components: {},
  props: {
    dialogData: {
      type: Object,
      default: () => { },
    }
  },
  mixins: [baseMixin({})],
  data() {
    return {
      form: {
        invoiceDate: new Date(),
      },
      options: [],
      rules: {
        invoiceTitle: [{ required: true, message: '请输入发票抬头', trigger: 'blur' }],
        makeInvoiceObj: [{ required: true, message: '请输入开票对象', trigger: 'blur' }],
        telPhone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
        invoiceCategory: [{ required: true, message: '请选择发票类别', trigger: 'blur' }],
        invoiceType: [{ required: true, message: '请选择发票类型', trigger: 'blur' }],
        paperFlag: [{ required: true, message: '请选择是否有纸质发票', trigger: 'blur' }],
        invoiceAmount: [{ required: true, message: '请输入发票金额', trigger: 'blur' }],
        taxRate: [{ required: true, message: '请输入增值税率', trigger: 'blur' }]
      },
      tableData:[{name: '2232'}],
      tableColumnAttributes: [
        { name: '业务单号', value: 'code', type: 'text'},
        { name: '商品编码', value: 'code', type: 'text'},
        { name: '商品名称', value: 'carOrderNo', type: 'text' },
        { name: '开票数量', value: 'storeName', type: 'text' },
        { name: '应收金额', value: 'storeName', type: 'text' },
        { name: '发票金额', value: 'storeName', type: 'text' },
        { name: '折扣金额', value: 'storeName', type: 'text' },
        { name: '不含税金额', value: 'storeName', type: 'text' },
        { name: '税额', value: 'storeName', type: 'text' },
        { name: '含税单价', value: 'storeName', type: 'text' },
        { name: '不含税单价', value: 'storeName', type: 'text' },
        { name: '销售单价', value: 'storeName', type: 'text' },
        { name: '销售数量', value: 'storeName', type: 'text' },
        { name: '销售金额', value: 'storeName', type: 'text' },
      ],
      paperFlagOptions: [{label: '有', value: true},{label: '无', value: false},],
      invoiceTypeOptions: ['增值税普通发票','增值税专用发票','机动车销售统一发票','服务类发票'],
      invoiceCategoryOptions: ['商品发票','整车销售发票','维修发票'],
    }
  },
  created () {
    this.form = Object.assign(this.form, this.dialogData);
  },
  methods: {
    getList() {

    },
    handleOk() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addSalesInvoice(this.form).then(response => {
            if (response.success) {
              this.$message.success("操作成功");
              this.$emit('close', false);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
